<template>
  <div class="breadcrumb">
    {{breadcrumb[0]}} / <span style="color: #FF9F2F;" class="excelName">{{breadcrumb[1]}}</span>
  </div>
</template>


<script>
  import {mapGetters, mapMutations} from 'vuex'
  import loginItem from './login-item'

  export default {
    data() {
      return {
        searchValue: '',
      }
    },
    watch: {
      searchValue(newVal, oldVal) {
        this.setSearchValue(newVal)
      }
    },
    components: {loginItem},
    computed: {
      ...mapGetters({
        breadcrumb: 'getBreadcrumb',
        getSearchValue: 'getSearchValue',
      }),
    },
    mounted() {
      let searchValue = this.getSearchValue
      if (searchValue) {
        this.searchValue = searchValue
      }
    },
    methods: {
      ...mapMutations([
        'setSearchValue'
      ]),
      searchInput(e) {
        var val = e.target.value;
        if (!val) return
      },
      search_button() {
        if(this.searchValue.trim() == '')return
        this.setSearchValue(this.searchValue)
        if(this.$route.name !== 'searchPage'){
          this.$router.push({ name: 'searchPage'})
          return
        }
        this.$emit('search_button')
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  @import './../assets/css/header-index.css';

  .headerBoxOther .el-menu li .el-submenu__title {
    margin-right: -17px;
  }
  .headerBoxOther .el-menu-short li .el-submenu__title {
    margin-right: -31px;
  }



  .el-dropdown {
    margin-top: 15px;
    margin-bottom: 15px;
  }

</style>
